<!--
 * @description: HeadlineCom;
 * @Date: 2023-04-11 10:16:48
 * @example: 
 * @params: 
-->
<template>
    <div class="Container" :class="{ align_center:props.textAlign,touming:props.backGroundCol}" ref="headline" >
        {{props.title}}
    </div> 
</template>
<script setup lang="ts">
import { ref } from 'vue'
const props = defineProps({
    title:{
        type: String,
        // required:true,
        default:() => "New Headlined......."
    },
    fontSize:{
        type: String,
        default:() => "40px"
    },
    textAlign:{
        type:Boolean,
        default:() => false
    },
    backGroundCol:{
        type: Boolean,
        default:() => false
    },
    gradientColor:{
        type:String,
        default:() => ""
    }

})
// const headline = ref('')
</script>
<style lang="less" scoped>
.Container {
     overflow: hidden;
     width: 100%;
     height: 100%;
     white-space: pre-wrap;
     padding: 20px;
     color: black;
     font-weight: bold;
     box-sizing: border-box;
    //  border: 1px solid bisque;
    //  border: 1px dashed grey;
     font-size: v-bind('props.fontSize');
     text-align: left;
     background-color: v-bind('props.gradientColor') !important;
    //  text-align:v-bind('props.textAlign');
    //  background-color: ;
}
.bgc {
    // background-color: #f9fafb;
}
.align_center {
    text-align: center;
}
.touming { 
    background-color: transparent !important;
}
</style>